<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>工资理财</title>
  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
  <!-- 必须先引入vue，  后使用element-ui -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
  <h2><span>工资理财推荐</span></h2>
  <hr>
  <template>
    <div class="table">
      <el-table
              :data="payList"
              style="width: 100%">
        <el-table-column
                prop="pay_id"
                label="序号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="productType.pro_type"
                label="产品类型"
        >
        </el-table-column>
        <el-table-column label="每月金额设定">
          <template slot-scope="scope">
            {{scope.row.pay_amount+'元'}}
          </template>
        </el-table-column>
        <el-table-column  label="产品利率">
          <template slot-scope="scope">
            {{scope.row.pay_rate+'%'}}
          </template>
        </el-table-column>
        <el-table-column label="投资期限">
          <template slot-scope="scope">
            {{scope.row.investmentHorizon.h_day+'天'}}
          </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="150">
          <template slot-scope="scope">
            <el-button @click="add(scope.row.pay_id)"  class="btn btn-info" role="button" style="background-color: #26BABD" data-toggle="modal" data-target="#myModal">$ 投资</i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- total:总条数 prev:上一页  pager:当前页 next:上一页 jumper 前往第几页-->
      <el-pagination
              background
              layout="total, prev, pager, next, jumper"
              :total="total"
              :current-page="currentPage"
              :page-size="pageSize"
              @size-change="handleSizePay"
              @current-change="handleCurrentPay">
      </el-pagination>
    </div>
  </template>
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">投资信息</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- 模态框主体 -->
        <form>
          <div class="modal-body input-group">
            <div class="container mt-3">
              <div class="input-group mb-3" hidden>
                <div class="input-group-prepend">
                  <span class="input-group-text">序号：</span>
                </div>
                <input type="text" class="form-control" placeholder="序号：" v-model="pays.pay_id" name="pay_id" readonly>
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">产品类型：</span>
                </div>
                <input type="text" class="form-control" placeholder="产品类型：" v-model="pro.pro_type" name="pro_type" readonly>
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">每月金额设定：</span>
                </div>
                <input type="text" id="pamount" class="form-control" placeholder="每月金额设定：" v-model="pays.pay_amount"  name="pay_amount" readonly>元
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">产品利率：</span>
                </div>
                <input type="text" class="form-control" placeholder="产品利率：" v-model="pays.pay_rate" name="pay_rate" readonly>%
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">投资金额：</span>
                </div>
                <input type="text" id="amounts" class="form-control" placeholder="投资金额：" name="amount" v-model="amount" >元（投资金额不能低于起投金额）
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">投资期限：</span>
                </div>
                <input type="text" class="form-control" placeholder="投资期限：" v-model="inv.h_day"  name="h_day" readonly>天
              </div>
            </div>
            <div class="container mt-3">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">选定银行卡：</span>
                </div>
                <select id="res">
                  <option>---请选择---</option>
                  <option v-for="b in bank"  name="b_name"  :value="b.bank_id">{{b.bank.b_name}}({{b.bank_card}})</option>
                </select>
              </div>
            </div>
          </div>
          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-info" @click="addPayMoney(pays.pay_id,amount,pro.pro_type)">投资</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
<style>
  .el-breadcrumb{
    margin-bottom: 15px;
    font-size: 12px;
  }
  .el-card{
    box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>

<script type="text/javascript">
  new Vue( {
    el:"#app",
    data:{
      amount:'',
      currentPage:1, //初始页
      pageSize:5,    //    每页的数据
      total:1,
      payList: [],
      pay:{
        pay_id:'',
        amount:'',
        pro_type:''
      },
      payId :{
        pay_id:''
      },
      pays:{},
      inv:{},
      pro:{},
      bank:[],
      personUser:{}
    },
    methods: {
      add(pay_id){
        var pay = this;
        this.payId.pay_id=pay_id;
        axios.post('/person/selectPayById/',"pay_id="+pay_id).then(res=>{
          pay.pays=res.data.payMoney;
          pay.inv=res.data.Invest;
          pay.pro=res.data.pro;
          pay.bank=res.data.bank;
          pay.personUser=res.data.personUser;
          for(let i=0;i<this.bank.length;i++) {
            let cardName = this.bank[i].bank_card;
            let cardLenth = cardName.length;
            let name = cardName.substring(cardLenth - 4, cardLenth.length);
            this.bank[i].bank_card=name;
          }
        })
      },
      handleSizePay(pageSize){
        this.pageSize = pageSize;
        // 点击每页显示的条数时，显示第一页
        this.showData(this.currentPage,this.pageSize)
      },

      showData(currentPage,pageSize){
        var pay = this;
        axios.get("/person/getPayList/"+currentPage+"/"+pageSize).then(res=>{
          console.log(res);
          pay.payList = res.data.list;
          pay.total = res.data.total;
          console.log(res.data.list);
        })
      },
      handleCurrentPay(currentPage){
        this.currentPage = currentPage;
        // 点击每页显示的条数时，显示第一页
        this.showData(this.currentPage,this.pageSize);
      },
      addPayMoney(pay_id,amount,pro_type) {
        var msg = "您真的确定要投资吗？\n\n请确认！";
        if (confirm(msg) == true) {
          var p_amounts = document.getElementById("pamount").value;
          var amounts = document.getElementById("amounts").value;
          let obj = document.getElementById("res"); //定位id
          let index = obj.selectedIndex; // 选中索引
          let bid = obj.options[index].value; // 选中值
          if(amounts==null && amounts==''){
            alert("投资金额不能为空！！！");
            return false;
          }
          if (amounts < p_amounts) {
            alert("投资金额不能小于月转入金额！！！");
            return false;
          }
          this.$prompt('请输入密码', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputErrorMessage: '密码格式不正确',
            inputPlaceholder:'password',
            inputType:'password'
          }).then(({ value }) => {
            if(value!=null&&value==this.personUser.deal_pwd){
              alert("卖入成功！！！");
              window.location.href="PayMoney.html";
              return true;
            }else {
              alert("密码不正确！！！");
              return false;
            }
          })
          this.pay.pay_id = pay_id;
          this.pay.amount = amount;
          this.pay.pro_type = pro_type;
          axios.post('/person/selectPayMoneys', "pay_id=" + pay_id + "&amount=" + amount + "&pro_type=" + pro_type+"&bank_id="+bid).then(res => {
            console.log(res.data)
          })
        } else {
          alert("卖入失败");
          window.location.href="PayMoney.html";
          return false;
        }
      }
    },created() {
      this.showData(1, 5)
    }
  })
</script>
</html>